<template>
  <div>
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>

    <van-card
      v-for="item in Details.orderLines"
      :key="item.id"
      :num="item != null ? item.number : 0"
      :price="item != null ? item.product.price : 0"
      :desc="item != null ? item.product.description : '无描述'"
      :title="item != null ? item.product.name : '无标题'"
      :thumb="item != null ? item.product.photo : 'xxx'"
    />
    <div class="bottom"></div>
    <div class="totalbody">
      <van-cell-group>
        <van-cell title="总计:" :value="'￥' + Details.total" />
      </van-cell-group>
    </div>
    <div class="confirmBtn" v-if="Details.status == '待确认'">
      <van-button type="info" @click="confirm">确认收货</van-button>
    </div>
    <div class="detailsbody">
      <span
        >服务地址:
        {{
          Details.address.province +
          Details.address.city +
          Details.address.area +
          Details.address.address
        }}
      </span>
      <span
        >联系方式:
        {{ Details.customer.username + "(" + Details.customer.telephone + ")" }}
      </span>
      <span
        >下单时间:
        {{ moment(Details.orderTime).format("YYYY-MM-DD hh:mm:ss") }}
      </span>
      <span
        >服务时间:
        {{ moment(Details.serviceTime).format("YYYY-MM-DD hh:mm:ss") }}
        {{ Details.status }}
      </span>
    </div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
let moment = require("moment");
import { Toast } from "vant";
export default {
  data() {
    return {
      Details: [],
    };
  },
  methods: {
    moment,
    onClickLeft() {
      this.$router.go(-1);
    },
    //详情页数据
    async getDetailsData() {
      let id = this.$route.query.id;
      let res = await get("/order/findById", { id });
      this.Details = res.data.data;
    },
    async confirm() {
      let orderId = this.$route.query.id;
      let res = await get("/order/confirmOrder", { orderId });
      Toast(res.data.message);
      this.$router.go(-1);
    },
  },
  computed: {},
  created() {
    this.getDetailsData();
  },
};
</script>

<style scoped>
.bottom {
  height: 60px;
}
.van-card {
  box-shadow: 2px 1px 3px 2px #e1e100;
  line-height: 10px;
  font-size: 13px;
  margin: 13px;
  border-radius: 13px;
}
.van-card__title {
  margin-bottom: 10px;
  font-size: 18px !important;
  font-weight: bolder;
}
.van-card__price-integer,
.van-cell__value {
  margin-top: 10px !important;
  font-weight: bolder;
  font-size: 18px !important;
  color: crimson;
}
.detailsbody {
  line-height: 25px;
  height: 100px;
  background-color: #fcfcfc;
  border: 1px solid;
  border-radius: 10px;
  margin-top: 60px;
}
.detailsbody span {
  color: #6c6c6c;
  font-size: 13px;
  margin-left: 10px;
  display: block;
}
.confirmBtn {
  margin-top: 5px;
  float: right;
}
.van-button {
  border-radius: 10px;
}
</style>